<template>
    <client-only>
        <div class="Page Confirm">
            <div class="Title">
                <h1 class="fl f18">订单确认</h1>
                <!-- <img src="~/assets/img/cart_setp2.png" class="fr"> -->
                <div class="clear"></div>
            </div>
            <form name="flowForm" id="flowForm" method="post" action="">
                <table class="GoodList">
                    <tbody>
                        <tr>
                            <th class="name">商品</th>
                            <th class="price">原价</th>
                            <th class="priceNew">价格</th>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td colspan="3" class="teacher">讲师：{{ order.teacherName }}</td>
                        </tr>
                        <tr class="good">
                            <td class="name First">
                                <a target="_blank" :href="`/course/${order.courseId}}`">
                                    <img :src="order.courseCover"></a>
                                <div class="goodInfo">
                                    <input type="hidden" class="ids ids_14502" value="14502">
                                    <a target="_blank" :href="`/course/${order.courseId}}`">{{ order.courseTitle }}</a>
                                </div>
                            </td>
                            <td class="price">
                                <p>￥<strong>{{ order.totalFee }}</strong></p>
                            </td>
                            <td class="red priceNew Last">￥<strong>{{ order.totalFee }}</strong></td>
                        </tr>
                        <tr>
                            <td class="Billing tr" colspan="3">
                                <div class="tr">
                                    <p>共 <strong class="red">1</strong> 件商品，合计<span
                                            class="red f20">￥<strong>{{ order.totalFee }}</strong></span></p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="Finish">
                    <div class="fr" id="AgreeDiv">
                        <el-checkbox v-model="agree">我已阅读并同意<a href="javascript:;">《厚溥云课堂购买协议》</a></el-checkbox>
                    </div>
                    <div class="clear"></div>
                    <div class="Main fl">
                        <div class="fl">
                            <a :href="`/course/${order.courseId}`">返回课程详情页</a>
                        </div>
                        <div class="fr">
                            <p>共 <strong class="red">1</strong> 件商品，合计<span class="red f20">￥<strong
                                        id="AllPrice">{{ order.totalFee }}</strong></span></p>
                        </div>
                    </div>
                    <input name="score" value="0" type="hidden" id="usedScore">
                    <el-button :disabled="!agree" type="danger" id="submitPay" @click="goPay">去支付</el-button>
                    <div class="clear"></div>
                </div>
            </form>
        </div>
    </client-only>
</template>
<script>
import orderApi from '../../api/order';
export default {
    data() {
        return {
            order: {},//订单信息
            agree: true,//是否同意
        }
    },
    created() {
        this.initOrder()
    },
    methods: {
        // 初始化订单信息
        initOrder() {
            orderApi.showInfo(this.$route.params.cid).then(res => {
                this.order = res.data
            })
        },
        // 支付
        goPay(){
            // 调用创建订单api，生成订单
            orderApi.createOrder(this.$route.params.cid).then(res=>{
                // 跳转到个人中心页面
                this.$router.push('/order/list')
            })
        }
    },
}
</script>